<template>
  <div class="shop-cart-bar-box flex-row">
    <div class="left ">
      <div class="icon-box bg-primary">
        <span class="iconfont icongouwucheman"></span>
        <span class="totalCount" v-if="userInfo">{{totalCount}}</span>
      </div>
    </div>
    <div class="center flex-1 flex-row a-c j-c" v-if="userInfo">共计 <span>{{totalPrice}}元</span></div>
    <div class="center flex-1 flex-row a-c j-c" v-else>暂未登录</div>
    <div class="right" v-if="userInfo" @click="$emit('click',$event)">去结算</div>
    <div class="right" v-else style="background-color: transparent"></div>
  </div>
</template>

<script>
import Api from "@/utils/Api";
import {mapGetters} from "vuex";

export default {
  name:"shop-cart-bar",
  data(){
    return {
      totalCount :0,
      totalPrice :0
    }
  },
  computed:{
    ...mapGetters(["userInfo"])
  },
  methods:{
    async getMyShopCartTotalInfo(){
      if (this.userInfo){
        let results = await Api.shopCart.getMyShopCartTotalInfo();
        this.totalCount = results.totalCount || 0;
        this.totalPrice = results.totalPrice || 0;
      }
    }
  },
  created() {
    this.getMyShopCartTotalInfo();
  }
}
</script>

<style scoped lang="scss">
.shop-cart-bar-box{
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 0.5rem;
  background-color: #404042;
  color: white;
  .left{
    position: absolute;
    left: 0.1rem;
    width: 0.7rem;
    height: 0.7rem;
    top: -0.2rem;
    background-color: #404042;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-box{
      width: 85%;
      height: 85%;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont{
        font-size: 0.4rem;
      }
      .totalCount{
        background-color: red;
        width: 0.2rem;
        height: 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        position: absolute;
        top: 0.05rem;
        right: 0.05rem;
      }
    }
  }
  .center{
    margin-left: 0.8rem;
    font-size: 0.14rem;
    span{
      font-size: 0.2rem;
    }
  }
  .right{
    background-color: gray;
    width: 0.9rem;
    height: 90%;
    margin-top: 0.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.05rem;
    border-radius: 0.08rem;
  }
}
</style>